<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>过滤器模式</title>
</head>
<body>
  <h1>过滤器模式：</h1>
  <h2>过滤器模式是个比较特殊的模式，它没有很复杂的结构，作为一个模式来说它太简单了，简单到只有一个输入和一个输出，可以认为是个不标准的纯函数（因为输入的数组引入了外部干扰的可能）。</h2>
  <h2>使用场景：当需要将过滤逻辑和业务代码解耦的时候</h2>
  <h2>优点：可复用，解耦过滤逻辑。</h2>
  <h2>缺点：无</h2>
</body>
<script>
    const persons = [];
    class Person{
        constructor(name,gender){
            this.name = name;
            this.gender = gender;
        }
    }

    class CriteriaMale{
        static meetCriteria(persons){
            if(!persons||persons.length === 0){
                return [];
            }
            let response = [];
            persons.forEach(element => {
                if(element.gender === "woman"){
                    response.push(element);
                }
            });
            return response;
        }
    }

    let request = [];
    request.push(new Person("m1","man"));
    request.push(new Person("m2","woman"));
    request.push(new Person("m3","man"));
    let response = CriteriaMale.meetCriteria(request);
    console.log(response);
    for (let i = 0; i < response.length; i++) {
        const el = document.createElement("div")
        el.classList.add("result")
        el.innerText = `Person { name:${response[i].name} , gender:${response[i].gender} }`
        document.body.appendChild(el)
    }

    /**
     [Person]0: Person {name: "m2", gender: "woman"}length: 1__proto__: Array(0)
     **/
</script>
</html>
